<!DOCTYPE html>
<html>
    <head>
        <title>WeakMap应用选课案例</title>
    </head>

    <style>
        * {
          padding: 0;
          margin: 0;
        }
        body {
          padding: 20px;
          width: 100vw;
          display: flex;
          box-sizing: border-box;
        }
        div {
          border: solid 2px #ddd;
          padding: 10px;
          flex: 1;
        }
        div:last-of-type {
          margin-left: -2px;
        }
        ul {
          list-style: none;
          display: flex;
          width: 200px;
          flex-direction: column;
        }
        li {
          height: 30px;
          border: solid 2px #e67e22;
          margin-bottom: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-left: 10px;
          color: #333;
          transition: 1s;
        }
        a {
          border-radius: 3px;
          width: 20px;
          height: 20px;
          text-decoration: none;
          text-align: center;
          background: #16a085;
          color: white;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 5px;
        }
        .remove {
          border: solid 2px #eee;
          opacity: 0.8;
          color: #eee;
        }
        .remove a {
          background: #eee;
        }
        p {
          margin-top: 20px;
        }
        p span {
          display: inline-block;
          background: #16a085;
          padding: 5px;
          color: white;
          margin-right: 10px;
          border-radius: 5px;
          margin-bottom: 10px;
        }
      </style>

    <body>
        <div>
            <ul>
                <li><span>php</span><a href="javascript:;">+</a></li>
                <li><span>javascript</span><a href="javascript:;">+</a></li>
                <li><span>其他课程</span><a href="javascript:;">+</a></li>
            </ul>
        </div>
        <strong id = "count">共选了  门课</strong>
        <p id = "lists"></p>
    </body>
    
    <script>
        class Lesson {
            constructor(){
                this.lis = document.querySelectorAll("ul>li");
                this.countElem = document.getElementById("count");
                this.listElem = document.getElementById("lists");
                this.map = new WeakMap();
            }
            run(){
                this.lis.forEach(item => {
                    item.querySelector('a').addEventListener('click',event => {
                        const elem = event.target;
                        const state = elem.getAttribute("select");
                        if(state){
                            elem.removeAttribute("select");
                            this.map.delete(elem.parentElement);
                            elem.innerHTML = "+";
                            elem.style.backgroundColor = "green";
                        }else{
                            elem.setAttribute("select",true);
                            this.innerHTML = "-";
                            elem.style.backgroundColor = "red";
                        }
                        this.render();
                    });
                });
            }
            count() {
                return [...this.lis].reduce((count,item) => {
                    return (count+=this.map.has(item)?1:0);
                },0);
            }
            lists(){
                return [...this.lis].filter(item => this.map.has(item)).map(item => (`<span>${item.querySelector("span").innerHTML}</span>`));
            }
            render(){
                this.countElem.innerHTML = `共选了${this.count()}课`;
                this.listElem.innerHTML = this.lists().join("");
                
            }
        }
        new Lesson().run();
    </script>
</html>